<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>预约详情</h1>
      </div>
      <br />
    </div>

    <div class="hzxx">
      <p>体检人信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="姓名">
              <el-input
                v-model="thepatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="thepatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="性别">
              <el-input
                v-model="thepatient.sex"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="套餐名称">
              <el-input
                v-model="setMeal.setMealName"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="年龄">
              <el-input
                v-model="thepatient.name"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="报告时间">
              <el-input
                v-model="physicalreport.createTime"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx">
      <p class="yyxx_p1">报告详情</p>
      <el-card class="box-card" style="height:380px;">
        <div class="cgjc">
          <div class="cgjc_box1">
            <p class="cgjc_p2">项目名称：{{conventionList.projectName}}</p>
            <div class="t1">
              <p class="t1_p1">项目名称</p>
              <p class="t1_p1">检查结果</p>
              <p class="t1_p1">参考值</p>
            </div>
            <div class="t2">
              <p class="t2_p1">身高</p>
              <p class="t2_p1">{{conventionList.bloodRoutineExaminatioId}}</p>
              <p class="t2_p1"></p>
            </div>
            <div class="t2">
              <p class="t2_p1">体重</p>
              <p class="t2_p1">{{conventionList.liverId}}</p>
              <p class="t2_p1"></p>
            </div>
            <div class="t2">
              <p class="t2_p1">BMI</p>
              <p class="t2_p1"></p>
              <p class="t2_p1"></p>
            </div>
            <div class="t2">
              <p class="t2_p1">血压（收缩压）</p>
              <p class="t2_p1">{{conventionList.hypertension}}</p>
              <p class="t2_p1">{{conventionList.hypertensionReference}}</p>
            </div>
            <div class="t2">
              <p class="t2_p1">血压（舒张压）</p>
              <p class="t2_p1">{{conventionList.hypotension}}</p>
              <p class="t2_p1">{{conventionList.hypotensionReference}}</p>
            </div>
          </div>
        </div>

        <div class="cgjc1">
          <div class="cgjc_box1">
            <p class="cgjc_p2">项目名称：{{bloodRoutineExaminatioList.projectName}}</p>
            <div class="t1">
              <p class="t1_p1">项目名称</p>
              <p class="t1_p1">检验值</p>
              <p class="t1_p1">参考范围</p>
            </div>
            <div class="t2">
              <p class="t2_p1">血红蛋白</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.redBloodCell}}</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.bloodCellsReference}}</p>
            </div>
            <div class="t2">
              <p class="t2_p1">红细胞</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.hemoglobinReference}}</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.bloodCellsReference}}</p>
            </div>
            <div class="t2">
              <p class="t2_p1">血小板</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.bloodCells}}</p>
              <p class="t2_p1">{{bloodRoutineExaminatioList.bloodCellsReference}}</p>
            </div>
           
          </div>
        </div>

        <!--<div class="anniu">
          <el-button type="primary" plain @click="quxiao">确定</el-button>
        </div>-->
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      medicalAppointment: [],
      thepatient: [],
      setMeal: [],
      divisiontype: [],
      campus: [],
      physicalreport: [],
      tableData: [],
      conventionList: [],
      bloodRoutineExaminatioList: []
    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
    //alert(this.id)
    //    alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdappointment();
    this.getAllconvention();
    this.getAllbloodRoutineExaminatio();
  },
  methods: {
    getByIdappointment() {
      this.$axios
        .get("/user/user/user/getByIdmedicalAppointment/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.medicalAppointment = res.data.data.medicalAppointment;
            this.thepatient = res.data.data.thePatient;
            this.divisiontype = res.data.data.divisionType;
            this.setMeal = res.data.data.setMeal;
            this.campus = res.data.data.campus;
            this.physicalreport = res.data.data.physicalReport;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //常规检查
    getAllconvention() {
      this.$axios
        .get("/user/user/user/getAllconvention/"+this.id)
        .then(res => { 
          if (res.data.code == 20000) {
            console.log(res.data.data.convention)
            this.conventionList = res.data.data.convention;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //血常规
    getAllbloodRoutineExaminatio() {
      this.$axios
        .get("/user/user/user/getAllbloodRoutineExaminatio/"+this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.bloodRoutineExaminatioList =
              res.data.data.bloodRoutineExaminatio;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      this.$router.push("/tijian");
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}
.hzxx {
  background-color: #e6e6e6;
}
.hzxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.hzxx_box1 {
  width: 300px;
  float: left;
}
.hzxx_box2 {
  float: left;
  margin-left: 100px;
}
.yyxx {
  background-color: #e6e6e6;
}
.yyxx_p1 {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 280px;
}
.cgjc {
  width: 500px;
  float: left;
}
.cgjc1 {
  width: 500px;
  float: right;
  margin-right: 150px;
}
.xcg {
  width: 500px;
  float: right;
}
.cgjc_box1 {
  float: left;
}
.cgjc_p2 {
  margin-top: -20px;
  margin-left: -20px;
  width: 200px;
  font-size: 16px;
  color: #000000;
  float: left;
}
.t1 {
  background-color: #f0f0f5;
  width: 600px;
  height: 40px;
  float: left;
}
.t1_p1 {
  font-size: 16px;
  padding-top: 12px;
  width: 200px;
  height: 40px;
  float: left;
  margin-top: -1px;
}
.t2 {
  font-size: 14px;
  width: 600px;
  height: 50px;
  float: left;
  border-bottom: 1px solid #f0f0f5;
}
.t2_p1 {
  font-size: 16px;
  padding-top: 14px;
  width: 200px;
  height: 40px;
  float: left;
  margin-top: -1px;
}
</style>
